<template>
	<view class="business">
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>商家名称</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入商家名称" v-model="shop_name" placeholder-class="inputColor"
					:disabled="getInfo">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx"></text>
				<text>主营项目</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入主营项目" v-model="main_project" placeholder-class="inputColor"
					:disabled="getInfo">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>联系方式</text>
			</view>
			<view class="right">
				<input placeholder="请输入手机号" type="number" v-model="phone" placeholder-class="inputColor"
					:disabled="getInfo">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>引荐人</text>
			</view>
			<view class="right">
				<input type="text" :value="recommend" disabled placeholder-class="inputColor" disabled="true">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>商家类型</text>
			</view>
			<view class="right" v-if="isShow == 1">
				<picker mode="selector" :range="businessType" @change="businessChoose">
					<view class="picker_text">{{businessName}}</view>
				</picker>
			</view>
			<view class="right" v-else>
				<input type="text" :value="businessType[shop_class]" disabled placeholder-class="inputColor"
					:disabled="getInfo">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>地域选择</text>
			</view>
			<view class="right">
				<input type="text" class="picker_text" @click="getAddress" disabled placeholder="请选择地域"
					v-model="shop_area" placeholder-class="inputColor" disabled="true">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx">*</text>
				<text>详细地址</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入详细地址" v-model="shop_address" placeholder-class="inputColor"
					:disabled="getInfo">
			</view>
		</view>
		<view class="inputlist">
			<view class="left">
				<text class="hx"></text>
				<text>描述</text>
			</view>
			<view class="right">
				<input type="text" placeholder="请输入描述" v-model="content" placeholder-class="inputColor"
					:disabled="getInfo">
			</view>
		</view>
		<view class="imgbox">
			<view class="title">
				商家图片：
			</view>
			<image @click="imgUp" v-if="imgs == ''" src="/static/img/add.png" mode="widthFix"></image>
			<image v-else :src="imgs | getImg" mode="widthFix" @click="showimg(imgs)"></image>
		</view>
		<view class="imgbox">
			<view class="title">
				营业执照：
			</view>
			<image @click="upload_license" v-if="license == ''" src="/static/img/add.png" mode="widthFix"></image>
			<image v-else :src="license | getImg" mode="widthFix" @click="showimg(license)"></image>
		</view>
		<view class="imgbox">
			<view class="title">
				商品图片：
			</view>
			<image @click="upload_goods" v-if="goods_img == ''" src="/static/img/add.png" mode="widthFix"></image>
			<image v-else :src="goods_img | getImg" mode="widthFix" @click="showimg(goods_img)"></image>
		</view>
		<view class="btn" v-if="isShow == 3">
			<button class="btn_sumbit">您已成为商家</button>
		</view>
		<view class="btn" v-if="isShow == 2">
			<button class="btn_sumbit">审核中</button>
		</view>
		<view class="btn" v-if="isShow == 1">
			<button class="btn_sumbit" @click="ShopApplyPost">提交</button>
		</view>

	</view>


</template>

<script>
	import {
		ShopApply,
		ShopApplyPost,
		getShopArea
	} from "@/api/user.js"
	var QQMapWX = require('@/common/libs/qqmap-wx-jssdk.js');
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				businessType: [],
				classlist: [],
				businessName: '请选择商家类型',
				address: '请选择地域',
				longitude: '',
				latitude: '',
				chooseLocationL: '',
				qqmapsdk: {},
				shop_name: '',
				shop_class: '',
				main_project: '',
				content: '',
				shop_address: '',
				imgs: '',
				license: '',
				goods_img: '',
				phone: '',
				recommend: '',
				shop_area: '',
				address_name: '',
				isShow: 0,
				getInfo: false,
				is_click: true

			}
		},
		onLoad() {
			this.ShopApply()
		},
		onShow() {

		},
		methods: {
			showimg(url) {
				if (url == '' || url == null || url == undefined) {
					return false
				}
				uni.previewImage({
					urls: [getApp().globalData.data.websiteUrl + url]
				})
			},
			ShopApplyPost() {
				if (!this.is_click) {
					uni.showToast({
						title: '请勿频繁操作',
						icon: "none"
					})
					return false
				}
				uni.showModal({
					title: '提示',
					content: '请确保信息填写完善',
					success: (data) => {
						if (data.confirm) {
							this.is_click = false
							ShopApplyPost({
								shop_name: this.shop_name,
								shop_class: this.shop_class,
								main_project: this.main_project,
								content: this.content,
								shop_area: this.shop_area,
								latitude: this.latitude,
								longitude: this.longitude,
								shop_address: this.shop_address,
								img: this.imgs,
								license: this.license,
								goods_img: this.goods_img,
								address_name: this.address_name,
								phone: this.phone
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
								if (res.status == 1) {
									setTimeout(() => {
										uni.navigateBack()
									}, 500)
								} else {
									this.is_click = true
								}
							})
						}
					}
				})

			},
			ShopApply() {
				ShopApply().then(res => {
					this.classlist = res.data.class
					this.recommend = res.data.recommend
					this.businessType = this.classlist.map((item) => {
						return item.name
					})
					if (res.data.info == '' || res.data.info.status == 2 || res.data.info.status == 3) {
						this.isShow = 1
					} else if (res.data.info.status == 0) {
						this.shop_name = res.data.info.shop_name
						this.shop_class = res.data.info.shop_class
						this.shop_class = this.classlist.findIndex(item => item.id == this.shop_class)
						this.main_project = res.data.info.main_project
						this.content = res.data.info.content
						this.shop_area = res.data.info.shop_area
						this.shop_address = res.data.info.shop_address
						this.imgs = res.data.info.img
						this.license = res.data.info.license
						this.goods_img = res.data.info.goods_img
						this.phone = res.data.info.phone
						this.address_name = res.data.info.address_name
						this.isShow = 2
						this.getInfo = true
					} else if (res.data.info.status == 1) {
						this.shop_name = res.data.info.shop_name
						this.shop_class = res.data.info.shop_class
						this.shop_class = this.classlist.findIndex(item => item.id == this.shop_class)
						this.main_project = res.data.info.main_project
						this.content = res.data.info.content
						this.shop_area = res.data.info.shop_area
						this.shop_address = res.data.info.shop_address
						this.imgs = res.data.info.img
						this.license = res.data.info.license
						this.goods_img = res.data.info.goods_img
						this.phone = res.data.info.phone
						this.address_name = res.data.info.address_name
						this.isShow = 3
						this.getInfo = true
					}

				})
			},

			getAddress() {
				var that = this
				if (that.isShow == 2 || that.isShow == 3) {
					return false
				}
				uni.getLocation({
					type: 'gcj02',
					altitude: false,
					geocode: true,
					isHighAccuracy: false,
					highAccuracyExpireTime: 100,
					success: function(res) {
						console.log(res);
						that.longitude = res.longitude
						that.latitude = res.latitude
						uni.chooseLocation({
							latitude: that.latitude,
							longitude: that.longitude,
							success: (data) => {
								console.log(data);
								that.shop_address = data.address
								that.address_name = data.name
								getShopArea({
									latitude: that.latitude,
									longitude: that.longitude,
								}).then(info => {
									console.log(info);
									that.shop_area = info.data.ad_info.name
								})
							}
						})
					}
				});
			},

			businessChoose(e) {
				let i = e.detail.value
				this.shop_class = this.classlist[i].id
				this.businessName = this.businessType[i]
			},
			imgUp() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: getApp().globalData.data.requestUrl + '/Upload/shop',
							method: "POST",
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'image',
							header: {
								'token': uni.getStorageSync('token'),
							},
							success: (res) => {
								let info = JSON.parse(res.data)
								let url = info.data.path
								that.imgs = url
							}
						})
					}
				})
			},
			upload_license() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: getApp().globalData.data.requestUrl + '/Upload/shop',
							method: "POST",
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'image',
							header: {
								'token': uni.getStorageSync('token'),
							},
							success: (res) => {
								let info = JSON.parse(res.data)
								let url = info.data.path
								that.license = url
							}
						})
					}
				})
			},
			upload_goods() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: getApp().globalData.data.requestUrl + '/Upload/shop',
							method: "POST",
							filePath: res.tempFilePaths[0],
							fileType: 'image',
							name: 'image',
							header: {
								'token': uni.getStorageSync('token'),
							},
							success: (res) => {
								let info = JSON.parse(res.data)
								let url = info.data.path
								that.goods_img = url
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #0F172A;
		padding: 10px 0;
	}

	.business {
		background: #1E293B;
		width: 96%;
		margin: 0 auto;
		border-radius: 10px;
		color: #fff;
		padding-bottom: 10px;
	}

	.btn {
		margin: 15px 0;

		.btn_sumbit {
			background: #798AD6;
			color: #fff;
			width: 80%;
			font-size: 14px;
			box-sizing: border-box;
		}
	}

	.imgbox {
		font-size: 14px;
		padding: 10px;

		image {
			margin-top: 10px;
			width: 100px;
		}
	}

	.inputlist {
		display: flex;
		font-size: 14px;
		padding: 18px 10px;
		border-bottom: 1px solid #303C4F;

		.left {
			width: 30%;
			display: flex;

			.hx {
				display: block;
				width: 5px;
				color: #ff7e80;
				margin-right: 5px;
			}
		}

		.right {
			width: 70%;

			input {
				font-size: 14px;
				color: #fff;
			}

			.inputColor {
				color: #fff;
			}


		}
	}
</style>